<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>Statistic</title>
    <link rel="stylesheet" href="/layui/css/layui.css">
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo" style="font-size: 25px;width: 300px"><i class="layui-icon layui-icon-template-1" style="font-size: 30px;"> </i>  Project Statistic Info</div>
    </div>
        <div class="layui-body" style="left: 0">
            <!-- 内容主体区域 -->
            <div style="padding: 15px;">
                <table id="demo" lay-filter="demo"></table>
            </div>
        </div>

        <div class="layui-footer" style="left: 0">
            <!-- 底部固定区域 -->
            © Project Statistic Info
        </div>
    </div>

</body>
<script type="text/html" id="toolbarDemo">
    用户:
        <div class="layui-inline">
            <input class="layui-input" name="user" id="user" placeholder="请输入用户查询" autocomplete="off">
        </div>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    项目:
    <div class="layui-inline">
        <input class="layui-input" name="project" id="project" placeholder="请输入项目查询" autocomplete="off">
    </div>
        <button class="layui-btn" lay-event="search">搜索</button>
</script>

<script src="/layui/layui.js"></script>
<script src="/jquery-3.4.1.min.js"></script>
<script>

    layui.use(['table'], function () {
        var table =layui.table;
        table.render({
            elem: '#demo'
            ,title: 'Project Statistic Info'
            ,height: 'full-160'
            ,url: '/page'
            ,method: 'post'
            ,page: true
            ,even: true //开启隔行背景
            ,size: 'lg' //小尺寸的表格
            ,toolbar: '#toolbarDemo'
            ,defaultToolbar: ['filter', 'print', 'exports']
            ,cols: [
                [
                    {field: 'id', title: 'ID', width:'5%'}
                    ,{field: 'user', title: '用户', width:'10%'}
                    ,{field: 'project', title: '项目', width:'15%'}
                    ,{field: 'totalLine', title: '总计(行)', width:'8%'}
                    ,{field: 'sourceCodeLine', title: '代码(行)', width: '13%',templet: '<div>{{d.sourceCodeLine}} &nbsp; ({{((d.sourceCodeLine/d.totalLine)*100).toFixed(2)}}%)</div>'}
                    ,{field: 'commentLine', title: '注释(行)', width: '13%',templet: '<div>{{d.commentLine}} &nbsp; ({{((d.commentLine/d.totalLine)*100).toFixed(2)}}%)</div>' }
                    ,{field: 'blankLine', title: '空白(行)', width: '13%',templet: '<div>{{d.blankLine}} &nbsp; ({{((d.blankLine/d.totalLine)*100).toFixed(2)}}%)</div>' }
                    ,{field: 'annotationLine', title: '注解(行)', width: '13%',templet: '<div>{{d.annotationLine}} &nbsp; ({{((d.annotationLine/d.totalLine)*100).toFixed(2)}}%)</div>'}
                    ,{field: 'date',title: '日期', width: '10%'}
                ]
            ],
            where:{
                'user' : $("#user").val(),
                'project' :$("#project").val()
            }
        });

        table.on('toolbar(demo)',function (obj) {
            if( (obj.event)=='search'){
                table.reload('demo',{where:{
                        'user' : $("#user").val(),
                        'project' :$("#project").val()
                }});
            }

        });
    });

</script>
</body>
</html>
